<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<link rel="stylesheet" type="text/css" href="table.css" />
<style>
    li
    {
        display:inline-block;
        padding: 7px;
        border-bottom-color: transparent;
        border-bottom-width: 3px;
        border-bottom-style: solid;
    }
    a
    {  text-decoration: none;
        color: #ffffff;
    }
    a:hover
    {
        transition: all 0.3s ease;
       transform: rotate(5deg);
	   color:#FF9;
    }
    li:hover
    {
        border-bottom-color: red;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        transition: all 0.3s ease;
		transform: translateX(20);
    }
    ul
    {
        background-color: rgba(0, 0, 0, 0.65);
        border-radius: 5px;
        border: solid 1px #c6c6c6;
        margin-top: 20px;
        width: 100%;
    }
    .traniangle
    { border-bottom-width: 5px;
        border-right-width: 15px;
        border-top-width: 13px;
        border-left-width: 15px;
        width: 0px;
        height: 0px;
        border-style:solid solid solid solid;
        border-color: #ff6308 transparent transparent transparent ;
    }
</style>
<body style="font-family:'Comic Sans MS', cursive; color:#343434; font-size:18px;">
<div>
    <ul>
       <li><a style="color: #ff9c10;" href="kickstart%20introduce%20.html"> HTML Kickstart</a></li>
        <label class="traniangle"><li><a href="table.html">table</a></li></label> <!--  class="active"-->
        <label class="traniangle"><li><a href="menus.html">menus</a></li></label>
        <label class="traniangle"><li><a href="button.html">button</a></li></label>
        <label class="traniangle"><li><a href="kickstart forms-style.html">forms</a></li></label>
    </ul>
</div>
<div style=" margin: 0 auto; margin-top: 70px; width: 1300px;">
    <font   style="margin-left: 490px; font-size:28px;">HTML kickstart-table style</font>
    <br/>  <br/>
    <div style=" margin-left:230px;width: 800px; padding: 20px; background-color: #f1f7f4; border-radius: 7px;">
    <table cellspacing="0" cellpadding="0">
        <thead><tr>
            <th>Item1</th>
            <th>Item2</th>
            <th>Item3</th>
        </tr></thead>
        <tbody><tr>
            <td>Item1</td>
            <td>Item2</td>
            <td>Item3</td>
        </tr><tr>
            <td>Item1</td>
            <td>Item2</td>
            <td>Item3</td>
        </tr><tr>
            <td>Item1</td>
            <td>Item2</td>
            <td>Item3</td>
        </tr><tr>
            <td>Item1</td>
            <td>Item2</td>
            <td>Item3</td>
        </tr>
        </tbody>
    </table>
        <details>
            <summary>原样式</summary>
            <textarea style="width: 500px; height: 100px;">
    table{width:100%;margin:0 0 10px 0;text-align:left;border-collapse: collapse;}
    thead, tbody{margin:0;padding:0;}
    th, td{padding:7px 10px;font-size:0.9em;border-bottom:1px dotted #ddd;text-align:left;}
    thead th{font-size:0.9em;padding:3px 10px;border-bottom:1px solid #ddd;}
    tbody tr.last th,
    tbody tr.last td{border-bottom:0;}
    /*tr:nth-child(even){
    background-color: rgba(45, 213, 255, 0.49);
}*/
/*tr:nth-child(even){
    background-color: rgba(142, 191, 198, 0.49);
}*/
/*tr:nth-child(even){
    background-color: rgba(255, 122, 25, 0.49);
}*/
tr:nth-child(even){
    background-color: rgba(255, 211, 3, 0.49);
}
/*tr:nth-child(even){
    background-color: rgba(169, 0, 255, 0.35);
}*/
/*tr:nth-child(even){
    background-color: rgba(250, 255, 187, 0.49);
}*/

                </textarea>
            </details>
        </div>
    <div style=" margin-left:230px;margin-top:20px; width: 800px; padding: 20px; background-color: #f1f7f4; border-radius: 7px;">
        <table class="striped" cellspacing="0" cellpadding="0">
            <thead><tr>
                <th>Item1</th>
                <th>Item2</th>
                <th>Item3</th>
            </tr></thead>
            <tbody><tr>
                <td>Item1</td>
                <td>Item2</td>
                <td>Item3</td>
            </tr><tr>
                <td>Item1</td>
                <td>Item2</td>
                <td>Item3</td>
            </tr><tr>
                <td>Item1</td>
                <td>Item2</td>
                <td>Item3</td>
            </tr><tr>
                <td>Item1</td>
                <td>Item2</td>
                <td>Item3</td>
            </tr>
            </tbody>
        </table>
        <details>
            <summary>class:striped</summary>
            <textarea style="width: 500px; height: 100px;">
                table{width:100%;margin:0 0 10px 0;text-align:left;border-collapse: collapse;}
    thead, tbody{margin:0;padding:0;}
    th, td{padding:7px 10px;font-size:0.9em;border-bottom:1px dotted #ddd;text-align:left;}
    thead th{font-size:0.9em;padding:3px 10px;border-bottom:1px solid #ddd;}
    tbody tr.last th,
    tbody tr.last td{border-bottom:0;}

    table.striped{}
    table.striped tr.alt{background:#f5f5f5;}
    table.striped thead th{background:#fff;}
    table.striped tbody th{background:#f5f5f5;text-align:right;padding-right:15px;border-right:1px dotted #e5e5e5;}
    table.striped tbody tr.alt th{background:#efefef;}

    /*tr:nth-child(even){
      background-color: rgba(45, 213, 255, 0.49);
  }*/
    /*tr:nth-child(even){
        background-color: rgba(142, 191, 198, 0.49);
    }*/
    /*tr:nth-child(even){
        background-color: rgba(255, 122, 25, 0.49);
    }*/
    tr:nth-child(even){
        background-color: rgba(255, 211, 3, 0.49);
    }
    /*tr:nth-child(even){
        background-color: rgba(169, 0, 255, 0.35);
    }*/
    /*tr:nth-child(even){
        background-color: rgba(250, 255, 187, 0.49);
    }*/
                </textarea>
        </details>
    </div>
    <div style=" margin-left:230px;margin-top:20px; width: 800px; padding: 20px; background-color: #f1f7f4; border-radius: 7px;">
    <table class="tight" cellspacing="0" cellpadding="0">
        <thead><tr>
            <th>Item1</th>
            <th>Item2</th>
            <th>Item3</th>
        </tr></thead>
        <tbody><tr>
            <td>Item1</td>
            <td>Item2</td>
            <td>Item3</td>
        </tr><tr>
            <td>Item1</td>
            <td>Item2</td>
            <td>Item3</td>
        </tr><tr>
            <td>Item1</td>
            <td>Item2</td>
            <td>Item3</td>
        </tr><tr>
            <td>Item1</td>
            <td>Item2</td>
            <td>Item3</td>
        </tr>
        </tbody>
    </table>
        <details>
            <summary>class:tight</summary>
            <textarea style="width: 500px; height: 100px;">
 table{width:100%;margin:0 0 10px 0;text-align:left;border-collapse: collapse;}
    thead, tbody{margin:0;padding:0;}
    th, td{padding:7px 10px;font-size:0.9em;border-bottom:1px dotted #ddd;text-align:left;}
    thead th{font-size:0.9em;padding:3px 10px;border-bottom:1px solid #ddd;}
    tbody tr.last th,
    tbody tr.last td{border-bottom:0;}

    table.tight{}
    table.tight th, .tight td{padding:2px 10px;}

    /*tr:nth-child(even){
      background-color: rgba(45, 213, 255, 0.49);
  }*/
    /*tr:nth-child(even){
        background-color: rgba(142, 191, 198, 0.49);
    }*/
    /*tr:nth-child(even){
        background-color: rgba(255, 122, 25, 0.49);
    }*/
    tr:nth-child(even){
        background-color: rgba(255, 211, 3, 0.49);
    }
    /*tr:nth-child(even){
        background-color: rgba(169, 0, 255, 0.35);
    }*/
    /*tr:nth-child(even){
        background-color: rgba(250, 255, 187, 0.49);
    }*/

                </textarea>
        </details>
    </div>
    <div style=" margin-left:230px;margin-top:20px; width: 800px; padding: 20px; background-color: #f1f7f4; border-radius: 7px;">
        <table class="sortable" cellspacing="0" cellpadding="0">
            <thead><tr>
                <th>Item1</th>
                <th>Item2</th>
                <th>Item3</th>
            </tr></thead>
            <tbody><tr>
                <td>Item1</td>
                <td>Item2</td>
                <td>Item3</td>
            </tr><tr>
                <td>Item1</td>
                <td>Item2</td>
                <td>Item3</td>
            </tr><tr>
                <td>Item1</td>
                <td>Item2</td>
                <td>Item3</td>
            </tr><tr>
                <td>Item1</td>
                <td>Item2</td>
                <td>Item3</td>
            </tr>
            </tbody>
        </table>
        <details>
            <summary>class:sortable</summary>
            <textarea style="width: 500px; height: 100px;">
    table{width:100%;margin:0 0 10px 0;text-align:left;border-collapse: collapse;}
    thead, tbody{margin:0;padding:0;}
    th, td{padding:7px 10px;font-size:0.9em;border-bottom:1px dotted #ddd;text-align:left;}
    thead th{font-size:0.9em;padding:3px 10px;border-bottom:1px solid #ddd;}
    tbody tr.last th,
    tbody tr.last td{border-bottom:0;}

    table.sortable{border:1px solid #ddd;}
    table.sortable thead th{cursor: pointer;position:relative;top:0;left:0;border-right:1px solid #ddd;}
    table.sortable thead th:hover{background:#efefef;}
    table.sortable span.arrow{border-style:solid;border-width:5px;
        display:block;position:absolute;top:50%;right:5px;font-size:0;
        border-color:#ccc transparent transparent transparent;
        line-height:0;height:0;width:0;margin-top:-2px;}
    table.sortable span.arrow.up{border-color:transparent transparent #ccc transparent;margin-top:-7px;}
    /*tr:nth-child(even){
      background-color: rgba(45, 213, 255, 0.49);
  }*/
    /*tr:nth-child(even){
        background-color: rgba(142, 191, 198, 0.49);
    }*/
    /*tr:nth-child(even){
        background-color: rgba(255, 122, 25, 0.49);
    }*/
    tr:nth-child(even){
        background-color: rgba(255, 211, 3, 0.49);
    }
    /*tr:nth-child(even){
        background-color: rgba(169, 0, 255, 0.35);
    }*/
    /*tr:nth-child(even){
        background-color: rgba(250, 255, 187, 0.49);
    }*/

                </textarea>
        </details>
    </div>
    <hr width="70%"  size="5" color="#343434"/>
    <div style=" text-align:center; color: #8c8c8c; font-size:18px;">Welcome to join in the “二班Open Source”</div>
</div>
</body>
</html>